<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :inline="true">
        <el-form-item>
          <!--按钮增加10s禁用-->
          <el-button type="primary" @click="autoPlan">自动排产</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never">
      <vxe-grid ref="gridRef" v-bind="gridOptions" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "PP",
  inherititems: false,
});
import PPAPI, { PPPageQuery, PPPageVO, PPForm, queryParams } from "@/api/product/pp";

interface RowVO {
  id?: string | number;
  product: string;
  line: string;
  product_name: string;
  [key: string]: string | number | undefined; // 生产日期
}

const gridRef = ref<typeof VxeGridInstance<RowVO>>();

const gridOptions = reactive<typeof VxeGridProps<RowVO>>({
  id: "pp",
  border: true,
  showOverflow: true,
  height: 700,
  loading: false,
  columnConfig: {
    resizable: true,
  },
  scrollY: {
    enabled: true,
    gt: 0,
  },
  scrollX: {
    enabled: true,
    gt: 0,
  },
  customConfig: {
    enabled: true,
    storage: {
      resizable: true,
    },
  },
});
const autoPlan = () => {
  const queryParams: queryParams = {
    // start_date: new Date("2024-01-01"),
    // end_date: new Date("2024-01-31"),
  };
  PPAPI.autoPlan(queryParams).then((res) => {
    loadList(200, 30);
  });
};

// 模拟行数据
const loadList = (rowSize: number, colSize: number) => {
  gridOptions.loading = true;
  setTimeout(async () => {
    const $grid = gridRef.value;
    const colList: (typeof VxeGridPropTypes.Column)[] = [
      {
        field: "product",
        title: "产品",
        width: 160,
        fixed: "left",
      },
      {
        field: "product_name",
        title: "名称",
        width: 160,
        fixed: "left",
      },
      {
        field: "line",
        title: "生产线",
        width: 160,
        fixed: "left",
      },
    ];

    const startDay = new Date().getTime();
    for (let i = 0; i < colSize; i++) {
      const title = new Date(startDay + i * 24 * 3600 * 1000).toLocaleDateString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
      });
      colList.push({
        field: title.replaceAll("/", "_"),
        title,
        width: 100,
      });
    }

    try {
      const response = await PPAPI.getList();

      const dataList: RowVO[] = [];
      response?.forEach((res) => {
        let item = dataList.find((item) => item.product === res.product);
        if (!item) {
          item = {
            product: res.product ?? "",
            product_name: res.product_name ?? "",
            line: res.line ?? "",
          };
          dataList.push(item);
        }
        if (res.date) {
          const key = new Date(res.date)
            .toLocaleDateString("zh-CN", {
              year: "numeric",
              month: "2-digit",
              day: "2-digit",
            })
            .replaceAll("/", "_");
          item[key] = res.quantity ?? 0;
        }
      });

      if ($grid) {
        await $grid.loadColumn(colList);
        await $grid.loadData(dataList);
      }
    } catch (error) {
      console.error("Error loading list:", error);
    } finally {
      gridOptions.loading = false;
    }
  }, 350);
};
onMounted(() => {
  loadList(200, 30);
});
</script>

<style scoped></style>
